<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>animation属性演示</title>
  <style>
    @keyframes slide {
      from {
        left: 0;
        top: 0;
      }

      50% {
        left: 50%;
        top: 50%;
      }

      to {
        left: calc(100% - 50px);
        top: 0;
      }
    }

    .stage {
      background: #ccc;
      border-radius: 6px;
      height: 150px;
      position: relative;
      width: 500px;
    }

    .stage:hover .ball {
      animation: slide 2s cubic-bezier(.87, .05, .17, .99);
    }

    .ball {
      background: #FF5100;
      border-radius: 50%;
      height: 50px;
      position: absolute;
      width: 50px;
      margin: 0;
    }

  </style>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
</head>

<body>
  <div class="stage">
    <figure class="ball"></figure>
  </div>
  <h1 class="animate__animated animate__flipInY">动画库使用练习</h1>
  <h2 class="animate__animated animate__flipInY">天空飘来五个字</h2>
  <h3 class="animate__animated animate__flipInY">那 都 不 是 事 儿</h3>
</body>

</html>
